/* 后缀 ->display: swap常用于优化含有大量媒体资源的网页 */
/* 比如：图片还没有加载完成, 可以先显示一个占位符图片 */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

/* 细节1: Flex布局使用 ->给父盒子设置 “display: flex;” 来控制子盒子在主轴和侧轴的对齐方式 */
/* 这里, 是由 body(父元素) 包裹 container(子元素), 进行整体页面布局来的！！！ */
body {
  background-color: steelblue;
  color: #fff;
  font-family: 'Muli', sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
}

/* ---container区域大体样式start--- */
.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
}

.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: lightblue;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.98);
}

.text {
  margin-top: 30px;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
  position: relative;
  z-index: 100;
}

/* 细节2: CSS3伪类 “:valid” ->当填写的内容符合要求的时候触发(这里只要是填了内容, 就触发样式效果) */
.form-control input:focus,
.form-control input:valid {
  /* 聚焦/填写内容后, 去掉默认出现的边框效果: */
  outline: 0;
  border-bottom-color: lightblue;
}

/* ---container区域大体样式end--- */

/* 细节3: CSS下, 先将 label 定位到输入框中： */
.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}

/* 处理：后期JS动态渲染<模板代码>时, 产生的span样式变化： */
.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;

  /* 细节4: 在 cubic-bezier 函数中自己的值, 可能的值是从 0 到 1 的数值 */
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 细节5: "+" ->相邻兄弟选择器 */
/* ":valid" ->用于匹配输入值为合法的元素 ->当输入框内容有效后, 顺带选择后面的标签, 一起进行样式变化 */
.form-control input:focus+label span,
.form-control input:valid+label span {
  color: lightblue;
  transform: translateY(-30px);
}